import {Component, ComponentProps, VueComponent} from "vue3-oop";
import {NForm, NTabs, NTabPane, NCollapse, NCollapseItem, NFormItem, NInputNumber, NRadioGroup, NRadioButton} from "naive-ui";
import styles from './index.module.scss';
import GridProps from '../widgets/layouts/grid/GridProps';
import FormData from "../types/FormData";
import WidgetConfig from '../widgets/basic/WidgetConfig';

interface IProps {
  formData: FormData
}
@Component()
export default class ConfigPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {}
  }

  render(){
    const { formData } = this.props;
    const rootProps = formData.nodeTree.widgetProps as GridProps;
    const showWidgetConfig = formData.selectedWidgetProps!=undefined;

    return(
      <NForm
        class={[styles.config_panel]}
      >
        <NTabs>
          <NTabPane tab="表单配置" name="FormConfig">
            <NCollapse>
              <NCollapseItem name="BASIC" title="基本属性">
                <NFormItem label="标签宽度">
                  <NInputNumber
                    value={rootProps.labelWidth} min={50} max={500}
                    onUpdateValue={(value)=>{rootProps.labelWidth=value||50;}}
                  />
                </NFormItem>
                <NFormItem label="标签对齐">
                  <NRadioGroup size="small" value={rootProps.labelAlign} onUpdateValue={(value)=>{rootProps.labelAlign=value}}>
                    <NRadioButton value="left" label="左"/>
                    <NRadioButton value="right" label="右"/>
                  </NRadioGroup>
                </NFormItem>
              </NCollapseItem>
              <NCollapseItem name="LAYOUT" title="布局属性">
                <NFormItem label="默认宽度">
                  <NInputNumber
                    value={rootProps.defaultSpan} min={1} max={24}
                    onUpdateValue={(value)=>{rootProps.defaultSpan=value||1;}}
                  />
                </NFormItem>
                <NFormItem label="水平间隔">
                  <NInputNumber
                    value={rootProps.gaps.x} min={0} max={100}
                    onUpdateValue={(value)=>{rootProps.gaps.x=value||0;}}
                  />
                </NFormItem>
                <NFormItem label="垂直间隔">
                  <NInputNumber
                    value={rootProps.gaps.y} min={0} max={100}
                    onUpdateValue={(value)=>{rootProps.gaps.y=value||0;}}
                  />
                </NFormItem>
              </NCollapseItem>
            </NCollapse>
          </NTabPane>
          { showWidgetConfig &&
              <NTabPane tab="组件配置" name="WidgetConfig">
                  <WidgetConfig formData={formData} widgetProps={formData.selectedWidgetProps} />
              </NTabPane>
          }
        </NTabs>
      </NForm>
    )
  }
}